<script type="text/javascript" src="{$base_dir}modules/billing/js/AJAX_OutPayment_AddService.js"></script>
<script type="text/javascript">
{literal}
    $(document).ready(function() {
        // Service code autocomplete
        var serviceCodeAC = $('#serviceCode').autocomplete('../Service/GetServiceCodeAutocompleteAjax?set_ajax_view');
        serviceCodeAC.setOptions({
            width:          365,
            minChars:       1,     
            matchContains:  true,                                      
            formatItem:     serviceFormatMatch                                                                
        });
        // Empty service code
        $('#serviceCode').blur(function() {
            if ($(this).val() == '') {
                resetAddServiceItemForm();
            }
        });
        
        $('input#serviceQuantity').autotab(
            {                 
                  maxlength: 2,
                  nospace: true,
                  format: 'numeric' 
            }); 
              
        $('input#unitPrice').autotab(
            {                
                maxlength: 11, 
                nospace: true,
                format: 'posnumericlocalize' 
            });
            
         $('input#unitPrice').keyup(function(event) {
            showServicePrices();
            return moveNext(event, 'addServiceBtn')
         });
         
         // Add service button
         $('#addServiceBtn').bind('click', addServiceItem);
         
         $('#serviceCode').focus();
    });     

    // Fill data for service code autocomplete result
    $('#serviceCode').result(function(event, data, formatted) {
        $(this).val(data[0]);
        $('#serviceName').val(data[1]);
        $('#serviceId').val(data[2]);
        $('#unitPrice').val(data[3]);
        $('#originalPrice').text(data[3]);
        $('#patientPrice').text(data[3]);
        $('#serviceName').focus();      
    });

    // Format data result for service code autocomplete
    function serviceFormatMatch(item) {        
        return item[0] + '<br /><i>' + item[1] + '</i>';
    }

    function serviceQuantityKeyup(event) {
        showServicePrices();
        return moveNext(event, 'addServiceBtn'); 
    }

    function serviceQuantityBlur() {
        var quantity = $.trim($('#serviceQuantity').val());     
        if (quantity == '' || quantity == 0) {
            $('#serviceQuantity').val(1);               
        }
    }
    
    function showServicePrices() {
       var quantity = $.trim($('#serviceQuantity').val());     
        if (quantity == '' || quantity == 0) {
            quantity = 0;               
        }
        var lcInt = locale(decimalPoint, thousandSep, 0);
        var price = quantity * parseLcNum($('#unitPrice').val(), lcInt);
        if (isNaN(price)) {
            price   =   0;
        }                           
        $('#originalPrice').text(toLcString(price, lcInt));
        $('#patientPrice').text(toLcString(price, lcInt));
    }
{/literal}    
</script>
<style>
{literal}
<!--
#addServiceTbl td {
    vertical-align: middle !important;
}
-->
{/literal}
</style>
<div class="lab_grid">
    <!-- Heading -->
    <div class="h_div">
        <table width="100%" cellpadding="0" cellspacing="0" >
            <thead style="text-transform: uppercase;">
                <tr>
                    <th style="width: 400px;">{translate}Code{/translate}-{translate}Service name{/translate}</th>
                    <th style="width: 100px;">{translate}Unit{/translate}</th>
                    <th style="width: 100px;">{translate}Quantity{/translate}</th>
                    <th style="width: 120px;">{translate}Unit price{/translate}</th>
                    <th style="width: 120px;">{translate}Price{/translate}</th>
                    <th class="last">&nbsp;</th>  
                </tr>
            </thead>
        </table>
    </div>
</div>
<div class="lab_grid">
    <!-- Adding service table -->
    <div class="b_div">
        <form id="addServiceFrm">
	        <table id="addServiceTbl" cellspacing="0" cellpadding="0" border="0" style="width: 100%">
	            <tbody> 
	               <tr>
	                    <td style="width: 400px;">
	                        <input id="serviceCode" name="serviceCode" type="text" value="" style="width: 50px; text-transform: uppercase;" maxlength="45">
                            <input id="serviceId" type="hidden" value="" name="serviceId"></input>
                            <input id="serviceName" type="text" name="serviceName" style="width: 300px;" maxlength="255" onkeyup="return moveNext(event, 'serviceQuantity')"></input>                                            
	                    </td>
	                    <td style="width: 100px;">
	                        <input type="text" style="width: 55px;" value="{translate}Times{/translate}" disabled="disabled">
	                        <input type="hidden" name="itemType" value="{$serviceType}">
	                        <input type="hidden" name="unitTitle" value="{translate}Times{/translate}">
	                    </td>        
	                    <td style="width: 100px;" class="field-number">
	                        <input id="serviceQuantity" type="text" name="serviceQuantity" value="1" style="width: 60px; text-align: right;" onkeyup="serviceQuantityKeyup(event);" onblur="serviceQuantityBlur();" maxlength="2"></input>
	                    </td>                                     
	                    <td style="width: 120px;" class="field-number">
	                        <input type="text" id="unitPrice" style="width: 100px; text-align: right; font-weight: bold;" maxlength="11" name="unitPrice"></input> 
	                    </td>
	                    <td style="width: 120px;" class="field-number field-money"><span id="originalPrice"></span></td>
	                    <td class="last action">
	                        <div id="addServiceBtnDiv">
	                            <input id="addServiceBtn" type="button" value="{translate}Add{/translate}"></input>
	                        </div>                                            
	                        <div id="addServiceLoader" style="display: none">
	                            <img src="../images/ajax-loader-small.gif">
	                        </div>
	                    </td>
	                </tr>
	            </tbody>
	        </table>
        </form>
    </div>    
</div>